<!-- @format -->

<!-- 页面脚本 -->
<script setup lang="ts">
/* 导入依赖 */
// 第三方：框架/库函数/数据类型
import { ref, computed } from 'vue'
import { onLoad, onReady, onShow, onHide, onUnload, onThemeChange } from '@dcloudio/uni-app'
// 自定义：状态库/局部组件/数据类型/工具函数
import { cartStore } from '@stores/index' // # 购物车状态数据
// console.log(cartStore)
// import type { Cart } from "@my-types/index" // # 类型声明
import { forEach } from '@utils/index' // # 工具函数
import GoodsCard from './components/goods-card/GoodsCard.vue'
import MoreGoods from '@components/test/more-goods/MoreGoods.vue'
/* 数据处理 */
const navbar = {
    nbTitle: '标题',
    titleIcon: '/static/logo.png',
    titleIconRadius: '20px',
    subtitleText: 'subtitleText',
    nbLoading: false,
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
}
// console.log("全局数据：", getApp().globalData)
// 购物车商品数据（全局）
const goods_dict = cartStore.goods_dict // # 购物车商品 id-info 字典
const validGoods = cartStore.validGoods // # 有效商品列表
const invalidGoods = cartStore.invalidGoods // # 失效商品列表
console.log('获取商品字典（元数据）：\n', goods_dict.value)
console.log('获取有效商品列表：\n', validGoods)
// const totalAmount = cartStore.totalAmount // # 总金额
// const discountList = cartStore.discountList // # 优惠列表
// const discountAmount = cartStore.discountAmount // # 优惠金额
// const totalPrice = cartStore.totalPrice // # 总价 = 总金额 - 优惠金额
// 购物车交互状态（页内）
const isEditing = ref(false) // # 批量编辑状态
const editingGoods = ref([]) // # 编辑状态下选中的商品 ID 列表
// # 全选框状态：1. 全部选中（勾选） 2. 部分选中（不勾选） 3. 全部不选（不勾选）
const isAllSelected = computed({
    get(): boolean {
        // 多选框全选中后全选框勾选，反之不勾选
        let allSelect = true
        forEach(validGoods, (gid) => {
            const item = goods_dict.value[gid]
            if (!item.isSelected) {
                allSelect = false
                return '\break'
            }
        })
        // console.log("all-select", allSelect)
        return allSelect
    },
    set(val: boolean) {
        // 全选框勾选/不勾选，多选框全选/全不选
        forEach(validGoods, (gid) => {
            const item = goods_dict.value[gid]
            item.isSelected = val
        })
    },
})

/* 辅助函数 */
// function

/* 事件处理 */
// function onChange(e: Cart.UIEvent<"change">) {
// 	// const message = e.target.dataset.message
// 	const detail = new Set(e.detail.value)
// 	// console.log("onChange\n", e, message, detail)
// 	// switch (message) {
// 	// 	case "select-goods":
// 	// 		break
// 	// }
// 	forEach<Cart.GoodsID>(validGoods, (gid) => {
// 		// console.log(detail.has(gid))
// 		goods_dict.value[gid].isSelected = detail.has(gid)
// 		// console.log(`${gid} isSelected true`, goods_dict.value)
// 	})
// }
// function onClick(e: Cart.UIEvent<"click">) {
// 	// console.log("onClick", e)
// 	// const message = e.target.dataset.message
// 	// switch (message) {
// 	// 	case "select-all":
// 	isAllSelected.value = !isAllSelected.value
// 	// 		break
// 	// }
// }

/* 生命周期 */
// 页面周期函数--监听页面加载
onLoad(() => {
    console.log('Cart Load')
})
// 页面周期函数--监听页面初次渲染完成
onReady(() => {
    console.log('Cart Ready')
})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {
    console.log('Cart Show')
})
// 页面周期函数--监听页面隐藏
onHide(() => {
    console.log('Cart Hide')
})
// 页面周期函数--监听页面卸载
onUnload(() => {
    console.log('Cart Unload')
})
// 页面处理函数--监听用户下拉动作
// onPullDownRefresh() { uni.stopPullDownRefresh(); },
// 页面处理函数--监听用户上拉触底
// onReachBottom() {},
// 页面处理函数--监听页面滚动(not-nvue)
// onPageScroll(event) {},
// 页面处理函数--用户点击右上角分享
// onShareAppMessage(options) {},
</script>

<!-- 页面模板 -->
<template>
    <page id="cart">
        <!-- 背景 -->
        <background class="test">cart</background>
        <!-- 页面主体 -->
        <!-- 导航栏 -->
        <bar class="flex jc-sb">
            <view class="item">
                <uni-icons class="iconfont icon-shop"></uni-icons>
                <text>3F 花甜</text>
            </view>
            <text class="item">编辑</text>
        </bar>
        <!-- 有效商品 -->
        <container v-if="validGoods.length > 0" class="mat-air">
            <goods-card />
        </container>
        <!-- 失效商品 -->
        <container v-if="invalidGoods.length > 0">
            <text>失效商品</text>
        </container>
        <!-- 更多商品：更多个性化推荐 -->
        <MoreGoods class="container" />
        <!-- 自定义 tabbar -->
        <!-- <custom-tab-bar /> -->
    </page>
</template>

<!-- 页面样式 -->
<style scoped lang="scss">
// navigation-bar {
//     height: 112rpx;
// }
#cart {
    background {
        // background-color: pink;
    }
}
#valid-goods_list {
    background-color: pink;
    // width: calc(100% - 4px);
}
</style>
